<template>
	<view class="container">
		<div class="header">
			<div class="stock-label">可用库存</div>
			<div class="stock-value">{{stockInfo.stock}}</div>

			<div class="froze-label">冻结库存</div>
			<div class="froze-value">{{stockInfo.frozen_stock}}</div>

			<div class="supplier-label" v-if="stockInfo.level<7">进货商</div>
			<div class="supplier-value" v-if="stockInfo.level<7">姓名：{{stockInfo.supplier.real_name}}　客户编码：{{stockInfo.supplier.spread_code}}　手机号：<span
					@tap="call(stockInfo.supplier.phone)">{{stockInfo.supplier.phone}}</span><span class="dial"
					@tap="call(stockInfo.supplier.phone)"><u-icon name="phone-fill"></u-icon></span></div>
		</div>

		<div class="body">
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item , index) in gridMenuList" :key="index" :index="index" @click="cellClick">
					<image class="cellIcon" :src="item.file_url"></image>
					<view class="grid-text">{{item.menu_name}}</view>
				</u-grid-item>
			</u-grid>
		</div>

		<u-modal v-model="transferShow" title="划拨库存" :show-cancel-button="true" confirm-text="划拨"
			confirm-color="#20cbd4" @confirm="transfer" @cancel="cancelTransfer">
			<view class="slot-content">
				<u-field class="contentItem" v-model="spread_code" @blur="checkPrice" label="客户编码"
					placeholder="请填写客户编码"></u-field>
				<u-field class="contentItem" v-model="transferPrice" :disabled="true" type="text" label="单价"
					placeholder=" "></u-field>
				<u-field class="contentItem" v-model="num" type="number" label="数量" placeholder="请填写数量"></u-field>
				<u-field class="contentItem" v-model="calcPrice" :disabled="true" label="总金额"
					placeholder="总金额"></u-field>
			</view>
		</u-modal>

		<u-modal v-model="purchaseShow" title="在线采购" :show-cancel-button="true" confirm-text="提交"
			confirm-color="#20cbd4" @confirm="createOrder">
			<view class="slot-content">
				<u-field class="contentItem" v-model="purchasePrice" :disabled="true" type="text" label="采购单价"
					placeholder="采购单价"></u-field>
				<u-field class="contentItem" v-model="pnum" type="number" label="采购数量" placeholder="请填写采购数量"></u-field>
				<u-field class="contentItem" v-model="orderPrice"  :disabled="true" label="采购总价" placeholder=" "></u-field>
			</view>
		</u-modal>

		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式" :cancel-style="{color:'#909399'}"
			@confirm="payConfirm">
			<view class="slot-content2">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" :separator-size="25" separator-color="#909399"
							:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">¥{{pay_price}}</view>
				<u-cell-group :border="false">
					<u-cell-item v-if="money_pay_show" :border-bottom="false" icon="rmb-circle-fill" :icon-style="{color:'#fece0a'}"
						:icon-size="60" title="积分支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="yue" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!--  #ifdef MP-WEIXIN -->
					<u-cell-item v-if="purchase_show && mini_show_wx" :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}"
						:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef H5 -->
					<u-cell-item v-if="purchase_show && h5_show_wx" :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}"
						:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<u-cell-item v-if="purchase_show && h5_show_ali" :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" :icon-size="60"
						title="支付宝支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="zhifubao" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef APP-PLUS -->
					<u-cell-item v-if="purchase_show && app_show_wx" :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}"
						:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<u-cell-item v-if="purchase_show && app_show_ali" :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" :icon-size="60"
						title="支付宝支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="zhifubao" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!-- #endif -->
				</u-cell-group>
			</view>
		</u-modal>

		<u-modal width="80%" v-model="payPwdShow" :show-title="true" confirm-color="#20cbd4" :show-cancel-button="true"
			@confirm="payYE">
			<view class="modelContent">
				<view class="accountData">
					<text>交易密码：</text>
					<u-input v-model="payPassword" type="password" placeholder="请输入交易密码" />
				</view>
			</view>
		</u-modal>

		<u-modal v-model="showConfirm" title="确定要划拨吗？" :show-cancel-button="true" @cancel="confirmCancel"
			@confirm="confirmTransfer">
				<view class="slot-content">
					<u-field class="contentItem" v-model="spread_code" :disabled="true" label="客户编码"
						placeholder="请填写客户编码"></u-field>
					<u-field class="contentItem" v-model="transferPrice" :disabled="true" label="单价"
						placeholder="单价"></u-field>
					<u-field class="contentItem" v-model="num" :disabled="true" label="数量" placeholder="数量"></u-field>
					<u-field class="contentItem" v-model="totalPrice" :disabled="true" label="总金额"
						placeholder="总金额"></u-field>
				</view>
		</u-modal>

	</view>
</template>

<script>
	import {
		stockCreateOrder,
		stockTransfer,
		stockPurchasePay,
		stockPurchasePayZfb,
		stockPurchaseHjVxPay,
		stockPurchasePayGzh,
		stockPurchasePayH5,
		stockNoticeCreate,
		stockCheckPrice,
		stockInfo
	} from "@/common/api.js";
	export default {
		data() {
			return {
				gridMenuList: [],
				purchaseMenu: {
					'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock1.png',
					'menu_name': '采购',
					'type': 1,
					'dialog': 2,
				},
				subMenuList: [{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock2.png',
						'menu_name': '采购记录',
						'type': 2,
						'page': '/stock/orderList'
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock4.png',
						'menu_name': '划拨',
						'type': 1,
						'dialog': 1,
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock11.png',
						'menu_name': '划拨记录',
						'type': 2,
						'page': '/stock/transferList'
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock5.png',
						'menu_name': '我的售后',
						'type': 2,
						'page': '/stock/refundList'
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock7.png',
						'menu_name': '客户售后',
						'type': 2,
						'page': '/stock/auditList'
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock8.png',
						'menu_name': '库存记录',
						'type': 2,
						'page': '/stock/stockRecord'
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock6.png',
						'menu_name': '客户列表',
						'type': 2,
						'page': '/stock/teamList'
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock9.png',
						'menu_name': '提货',
						'type': 3,
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock10.png',
						'menu_name': '提货订单',
						'type': 4,
					},
					{
						'file_url': 'https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/yunxingzhan/store/uni_home_stock3.png',
						'menu_name': '代购',
						'type': 5,
					}
				],
				showConfirm: false,
				modalShow: false,
				payPwdShow: false,
				payType: "yue",
				payPassword: "",
				transferShow: false,
				purchaseShow: false,
				spread_code: '',
				num: undefined,
				pnum: undefined,
				pay_price: '',
				order_id: 0,
				transferPrice: '',
				purchasePrice: '',
				transferGoodsPrice: '',
				totalPrice: '',
				calcPrice: '￥0.00',
				orderPrice: '￥0.00',
				msg: '',
				money_pay_show: 1,
				h5_show_ali: 1,
				h5_show_wx: 1,
				app_show_ali: 1,
				app_show_wx: 1,
				mini_show_ali: 1,
				mini_show_wx: 1,
				purchase_show: 1,
				stockInfo: {},
			}
		},
		onLoad(options) {
			this.$set(this, 'gridMenuList', [...this.subMenuList])
		},
		onShow() {
			this.getStockInfo()
		},
		watch: {
			num(newVal, oldVal) {
				let price = this.transferGoodsPrice * newVal
				price = price.toFixed(2)
				this.calcPrice = '￥' + price
			},
			pnum(newVal, oldVal) {
				let price = this.stockInfo['goods_price'] * newVal
				price = price.toFixed(2)
				this.orderPrice = '￥' + price
			}
		},
		methods: {
			checkPrice() {
				if (this.spread_code && this.spread_code.length > 6) {
					stockCheckPrice(this, {
						spread_code: this.spread_code
					}, (res) => {
						this.transferGoodsPrice = res
						this.transferPrice = '￥' + res
					});
				}
			},
			reloadOrder() {
				this.getStockInfo()
				this.num = ''

				this.$u.route({
					type: 'navigateTo',
					url: '/stock/payResult',
				});
			},
			getStockInfo() {
				stockInfo(this, {}, (res) => {
					
					this.money_pay_show = res.paystate.money_pay_show
					this.h5_show_ali = res.paystate.h5_show_ali
					this.h5_show_wx = res.paystate.h5_show_wx
					this.app_show_ali = res.paystate.app_show_ali
					this.app_show_wx = res.paystate.app_show_wx
					this.mini_show_ali = res.paystate.mini_show_ali
					this.mini_show_wx = res.paystate.mini_show_wx
					this.purchase_show = res.paystate.purchase_show
					
					this.stockInfo = res
					this.purchasePrice = '￥' + res['goods_price']
					if (res.level >= 7 || res.is_seller == 1) {
						// this.$set(this, 'gridMenuList', [this.purchaseMenu, ...this.subMenuList])
					}
				})
			},
			call(phone) {
				let that = this
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						stockNoticeCreate(that, {})
					},
					fail() {}
				})
			},
			cellClick(index) {
				let menu = this.gridMenuList[index]
				if (menu.type == 2) {
					uni.navigateTo({
						url: menu.page
					});
				} else if (menu.type == 1) {
					if (menu.dialog == 1) {
						this.transferShow = true
					} else {
						this.purchaseShow = true
						this.pnum = ''
					}
				} else if (menu.type == 3) {
					uni.switchTab({
						url: "/pages/tabBar/home"
					})
				} else if (menu.type == 4) {
					uni.navigateTo({
						url:"/user/orderlist"
					})
				} else if (menu.type == 5) {
					uni.switchTab({
						url: "/pages/tabBar/cart"
					})
				}
			},
			cancelTransfer() {
				this.spread_code = ''
				this.transferPrice = ''
				this.num = ''
			},
			confirmCancel() {

			},
			transfer() {
				let price = this.transferGoodsPrice * this.num
				price = price.toFixed(2)
				this.totalPrice = '￥' + price
				this.showConfirm = true
			},
			confirmTransfer() {
				stockTransfer(this, {
					spread_code: this.spread_code,
					num: this.num
				}, (res) => {
					this.spread_code = ''
					this.num = ''
					this.transferPrice = ''
					this.transferGoodsPrice = ''
					this.getStockInfo()
					this.$u.toast('划拨成功');
				})
			},
			//结算
			settle() {
				var _this = this;
				/*
				 * presellPay 小程序支付
				 * presellPayZfb  支付宝支付 （APP、H5）
				 * presellHjVxPay 微信APP支付 （兼容汇聚和官方）
				 * presellPayGzh 公众号支付
				 * presellPayH5  H5支付
				 */
				_this.modalShow = false;
				if (_this.payType == 'yue') {
					if (this.payPassword == "") {
						this.payPwdShow = true;
					} else {
						this.payYE();
					}
					return;
				}
				uni.showLoading({
					title: '支付中...'
				});
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync("openid") == "") {
					uni.getSetting({
						success: function(a) {
							uni.getUserProfile({
								desc: 'Wexin',
								success: function(b) {
									uni.login({
										success(res) {
											uni.hideLoading();
											if (res.code) {
												wxminiGetOpenid(_this, {
													code: res.code
												})
											} else {
												_this.$refs.uToast.show({
													title: '授权获取失败',
												})
											}
										}
									})
								}
							});
						}
					});
				}
				if (uni.getStorageSync("openid") != "" && uni.getStorageSync("openid") != "undefined") {
					//微信小程序支付
					stockPurchasePay(this, {
						pay_type: 'wx_mini',
						order_id: this.order_id
					});
				}
				// #endif

				// #ifdef APP-PLUS
				if (_this.payType == 'zhifubao') {
					//支付宝APP支付
					stockPurchasePayZfb(this, {
						pay_type: 'ali_h5',
						order_id: this.order_id
					});
				} else {
					//微信APP支付
					stockPurchaseHjVxPay(this, {
						pay_type: 'wx_app',
						order_id: this.order_id
					});

				}
				// #endif

				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					if (_this.payType == 'zhifubao') {
						uni.hideLoading();
						_this.$refs.uToast.show({
							title: '微信浏览器无法用支付宝支付',
						})
					} else {
						//微信公众号支付
						stockPurchasePayGzh(this, {
							pay_type: 'wx_chat',
							order_id: this.order_id
						});
					}
				} else {
					if (_this.payType == 'zhifubao') {
						//支付宝手机H5支付
						stockPurchasePayZfb(this, {
							pay_type: 'ali_h5',
							order_id: this.order_id
						});

					} else {
						// 微信H5支付
						stockPurchasePayH5(this, {
							pay_type: 'wx_h5',
							order_id: this.order_id
						});
					}
				}
				// #endif
			},
			settleNew() {
				this.modalShow = true;
			},
			radioChange(e) {
				this.payType = e;
			},
			payYE() {
				uni.showLoading({
					title: '支付中...'
				});
				this.payPwdShow = false;
				var pay_pwd = this.payPassword;
				this.payPassword = "";
				stockPurchasePay(this, {
					pay_type: 'yu_e',
					order_id: this.order_id,
					pay_pwd: pay_pwd
				})
			},
			payConfirm() {
				this.settle();
			},
			createOrder() {
				stockCreateOrder(this, {
					num: this.pnum
				}, (res) => {
					this.modalShow = true
					this.order_id = res.order_id
					this.pay_price = res.pay_price
					this.pnum = ''
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		height: 100%;
	}

	.header {
		padding-top: 80rpx;
	}

	.stock-label {
		font-size: 16px;
		text-align: center;
		line-height: 30rpx;
	}

	.stock-value {
		font-size: 20px;
		line-height: 30px;
		text-align: center;
	}

	.froze-label {
		font-size: 14px;
		text-align: center;
		color: #999999;
		margin-top: 20rpx;
	}

	.supplier-label {
		font-size: 14px;
		text-align: center;
		color: #999999;
		margin-top: 20rpx;
	}

	.supplier-value {
		font-size: 12px;
		text-align: center;
		color: #999999;
		margin-top: 20rpx;
	}

	.froze-value {
		font-size: 14px;
		text-align: center;
		color: #999999;
	}

	.body {
		margin-top: 50rpx;
	}

	.cellIcon {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 15rpx;
	}

	.slot-content {
		padding: 30rpx 20rpx;
	}

	.contentItem {
		margin-bottom: 30rpx;
	}



	.slot-content2 {
		padding: 20rpx 40rpx;
	}

	.slot-content2 .u-radio {
		text-align: right;
		float: right !important
	}

	.payTime {
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}

	.modelPrice {
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modelContent {
		padding: 40rpx;
	}

	.accountData {
		padding: 15rpx 0 15px 200rpx;
		position: relative;
	}

	.accountData text {
		position: absolute;
		left: 0;
		top: 15px;
		display: inline-block;
		width: 190rpx;
		text-align: right;
	}

	.accountData .u-input {
		border-bottom: 0.5rpx solid #222;
	}

	.accountData .u-input input {
		min-width: 260rpx
	}

	.dial {
		color: #FA3534;
		font-size: 18px;
	}
</style>